<template>
	<view :style="{'--color':color}">
	

		<view class="navBox">
			<u-tabs :list="payInfo" keyName="to_name" @click="click" :current="current" lineWidth="28"
				:lineColor="color" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
		</view>

       
		<block v-for="(item,index) in payInfo" :key="index">
			<view class="wechat" :class="item.bankName?'backgg':'flexac'" @click="addAcount(item)"
				v-if="current == index">
				<view class="d-flex a-center" v-if="item.bankName">
					<image :src="$imgUrls(item.account_img)" mode="aspectFit" class="CodineIMG" v-if="item.account_img">
					</image>
					<view class="d-flex f-column m-left20">
						<text class="white size32 bold">{{item.bankName}}</text>
						<text class="white size26 m-top20">{{item.userName}}（{{item.phone || item.bankCard}}）</text>
					</view>
				</view>
				<view class="d-flex a-center color bold" v-else>
					<view class="iconfont icon-tianjia h6 "></view>
					<text class="size28 m-left10">{{item.cash_method | methodTxt}}</text>
				</view>
			</view>
		</block>



		<view class="duihne">
			<text class="color_38 size28 bold">提现金额</text>
			<view class="row a-center m-top20 bot">
				<image :src="$pop.staticImg('jifen.png')" class="jifenIcon"></image>
				<input type="number" v-model="money" class="Jifen" placeholder="请填写提现金额" />
				<text class="color bold size26" @click="Exchange" v-if="pageData.income > 0">全部提现</text>
			</view>
			<text class="color_66 size26 m-top14">当前账号可提现金额：{{pageData.income}}</text>
			<view class="row j-sa a-center m-top50">
				<view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
				<view class="btns flexac config size26 white" @click="SellBtn">立即提现</view>
			</view>
		</view>


		<view class="viewboxs auto m-top20">
			<u-parse :content="pageData.desc" :domain="imgUrl"></u-parse>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				pageData: '',
				payInfo: [],
				itemStyle: {
					height: '102rpx'
				},
				activeStyle: {
					color: '',
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '28rpx',
				},
				current: 0,
				money: '',
			}
		},

		onShow() {
			this.activeStyle.color = this.color;
			this.cashRecordDetail();
		},
		methods: {
			cashRecordDetail() {
				this.$http.get({
					url: '/zzj_singleSaleApi/cashRecordDetail',
				}).then(res => {
					if (res.code != '200') return this.$Toast(res.msg);
					const result = res.data;
					this.pageData = result;
					this.payInfo = result.payInfo;
				})
			},
			click(e) {
				this.current = e.index;
			},
			Exchange() {
				this.money = this.pageData.income
			},
			addAcount(item) {
				if (item.cash_method == 1) return this.toUrl(`addBank`);
				if (item.cash_method == 4 || item.cash_method == 5) {
					this.toUrl(`addKuan?cash_method=${item.cash_method}`)
				}
			},
			SellBtn(){
				const result = this.payInfo[this.current];
				console.log(result,'result');
				if(result.cash_method == 1 && !result.bankCard) return this.$Toast(`请添加银行卡`);
				if(result.cash_method == 4 && !result.userName || result.cash_method == 5 && !result.userName) return this.$Toast(`请添加收款信息`);
				if(!this.money) return this.$Toast(`提现金额不能为空！`);
				this.$http.post({
					url:'/singleSaleApi/CommissionWithdrawal',
					data:{
						money:this.money,
						bankCard:result.bankCard,
						cash_method:result.cash_method
					}
				}).then(res=>{
					if(res.errcode != '100') return this.$Toast(res.msg);
					this.$Toast(res.msg);
					this.money = '';
					this.cashRecordDetail();
				})
				
			}
		},
		computed: {
			...mapState(['color'])
		},
		filters: {
			methodTxt(cash_method) {
				switch (cash_method) {
					case 1:
						return '点击添加银行卡';
					case 2:
						return '到微信红包';
					case 3:
						return '到余额';
					case 4:
						return '点击添加微信收款码';
					case 5:
						return '点击添加支付宝收款码';
					default:
						return '';
				}
			}
		},

	}
</script>
<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.navBox {
		width: 690rpx;
		margin: 0 auto;
	}

	.duihne {
		width: 670rpx;
		background-color: #ffffff;
		margin: 30rpx auto 0;
		padding: 30rpx 30rpx 50rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.Jifen {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.jifenIcon {
		width: 27rpx;
		height: 29rpx;
	}

	.btns {
		width: 258rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}

	.config {
		background-color: var(--color);

	}

	.wechat {
		width: 670rpx;
		min-height: 180rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 20rpx;

	}

	.wechatImg {
		width: 100%;
		height: 300rpx;
	}

	.CodineIMG {
		width: 100rpx;
		height: 100rpx;
	}

	.backgg {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		background-color: var(--color);
	}
</style>